import Taro, {Component} from '@tarojs/taro'
import {View, ScrollView} from '@tarojs/components'
import classNames from 'classnames'
import fetch from '../../utils/request'
import {API_GOODS_BRAND} from '../../constants/api'
import {AtIndexes} from 'taro-ui'
import './index.scss'

class Menu extends Component {

  getBrands() {
    return new Promise(async resolve => {
      let brands = await fetch({
        url: API_GOODS_BRAND,
        payload: {indexes: 1}
      })
      this.setState({
        brands: [...brands]
      }, () => {
        resolve()
        this.props.onFinishPullDown()
      })
    })
  }

  static defaultProps = {
    isfixed: false
  };

  constructor(props) {
    super(props)
  }

  static options = {
    addGlobalClass: true,
    // styleIsolation: 'shared'
  }

  state = {
    show: false,
    brands: []
  }

  toggle() {
    const show = this.state.show
    if (show == false) {
      Taro.showLoading({
        title: '加载模块中',
        mask: true
      })
      this.getBrands().then(() => {
        Taro.nextTick(() => {
          Taro.hideLoading()
          this.setState({
            show: true
          })
        })
      })
    } else {
      this.setState({
        show: false
      })
    }
  }

  chooseBrand(item) {
    console.log('item', item)
    Taro.navigateTo({
      url: '/pages/list/index?brandIds=' + item.id + '&name=' + item.name
    })
  }

  config = {
    navigationBarTitleText: ''
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.pullDown === true && this.props.pullDown != nextProps.pullDown && this.props.tabIndex == 0 && this.state.show) {
      //切换了menuItem
      this.getBrands()
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentDidShow() {

  }

  componentDidHide() {
    this.setState({
      show: false
    })
  }

  componentCatchError() {
  }

  render() {
    const height = Taro.getSystemInfoSync().windowHeight * 2 + 'px'
    const width = Taro.getSystemInfoSync().windowWidth * 2 + 'px'
    const {show, brands} = this.state
    const {isfixed} = this.props
    return (
      <View className={classNames('menu_page', {'nav-open': show})}>
        <View className="nav">
          <View className="nav-wrapper">
            <AtIndexes
              topKey="品牌"
              isVibrate={true}
              isShowToast={true}
              list={brands}
              onClick={this.chooseBrand.bind(this)}>

            </AtIndexes>
            {/* {
                  brands.map((item,index)=>(
                    <View key={item.id}
                    className={classNames('menu_box_tab_tag',{'menu_box_tab_tag_active':true})}
                    onClick={this.chooseBrand.bind(this,item)}
                    >
                      {item.name}
                    </View>
                  ))
                 } */}
          </View>
        </View>
        <View className={classNames({'before-primary-lighter': isfixed}, "nav-toggle")}
              onClick={this.toggle.bind(this)}>
          {/* <View className={classNames('nav-toggle-before',{'nav-toggle-before-active':show})}
               style={show?{height,width}:{}}></View> */}
          <View className="icon-toggle"></View>
        </View>
        <View class="lower-screen">

        </View>
      </View>
    )
  }
}

export default Menu
